<template>
<!-- 会员用户个人信息处 -->
    <div>
      <el-page-header @back="goBack">
      </el-page-header>
        <!-- 背景图片 -->
        <div>
            <el-carousel indicator-position="outside" height="400px">
                <el-carousel-item>
                    <img :src="'http://192.168.43.183/files/' + MenUser.memImg" width="1550px">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 个人信息 -->
        <div>
            <div @click="clickTou">
                <el-avatar :src="'http://192.168.43.183/files/' + MenUser.memImg" :size=100 style="position: absolute;top:340px;right:80px;z-index:99;cursor: pointer;" title="点击修改头像"></el-avatar>
                <input type="file" id="memid" @change="changeFile($event)" style="position: absolute;top:160px;right:150px" hidden>
            </div>
        </div>
        <!-- 尾部 -->
        <div class="MeMber-last">
            <!-- 个人信息 -->
            <div style="width:1560px;height:100px;background-color: slategrey ;position: absolute;top:0px">
                <h3 style="margin-left: 50px;margin-top:50px">个人信息</h3>
                <el-divider></el-divider>
            </div>
             <div style="margin-left: 50px;margin-top:150px;">
                 <svg class="icon myIcon" aria-hidden="true">
                     <use xlink:href="#icon-geren"></use>
                 </svg>
                 <span style="font-size:20px;margin-right:15px;cursor: pointer;">姓名:</span><span style="font-size:20px;margin-right:150px;cursor: pointer;">{{MenUser.memName}}</span>
                 <span style="font-size:20px;margin-right:15px;cursor: pointer;">手机号:</span><span style="font-size:20px;margin-right:250px;cursor: pointer;">{{MenUser.memPhone}}</span>
                 <span style="font-size:20px;margin-right:15px;cursor: pointer;">籍贯:</span><span style="font-size:20px;cursor: pointer;">{{MenUser.memNativePlace}}</span>
                 <svg class="icon myIcoms jiantou" aria-hidden="true" @click="dialogVisible = true">
                     <use xlink:href="#icon-jiantouyou"></use>
                 </svg>
                 <!-- 会员个人信息完善 -->
                 <el-dialog
                    title="个人信息" :visible.sync="dialogVisible" width="60%">
                    <el-form :model="MenUser" status-icon ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
                         <el-form-item label="id" prop="memId" hidden>
                            <el-input type="text" v-model="MenUser.memId" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="memName">
                            <el-input type="text" v-model="MenUser.memName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证" prop="memIdentity">
                            <el-input type="text" v-model="MenUser.memIdentity" autocomplete="off" @blur="jiequ"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="memPhone">
                            <el-input v-model="MenUser.memPhone"></el-input>
                        </el-form-item>
                        <el-form-item label="登陆密码" prop="memPassword" hidden>
                            <el-input v-model="MenUser.memPassword"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="memGender">
                        <el-radio-group size="medium" v-model="MenUser.memGender">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                        </el-form-item>
                        <el-form-item label="国籍" prop="memNativePlace">
                            <el-input v-model="MenUser.memNativePlace" type="text"></el-input>
                        </el-form-item>
                        <el-form-item label="民族" prop="memNation">
                            <el-input v-model="MenUser.memNation"></el-input>
                        </el-form-item>
                         <el-form-item label="出生日期" prop="memBirthday">
                            <el-input v-model="MenUser.memBirthday" type="text" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="memEmail">
                            <el-input v-model="MenUser.memEmail" type="text" placeholder="请填写邮箱地址"></el-input>
                        </el-form-item>
                        <el-form-item label="头像" prop="memImg" hidden>
                            <el-input v-model="MenUser.memImg" type="text" hidden></el-input>
                        </el-form-item>
                        <el-form-item label="婚否" prop="memWedlock">
                        <el-radio-group size="medium"  v-model="MenUser.memWedlock">
                                <el-radio label="已婚"></el-radio>
                                <el-radio label="未婚"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="职业" prop="memKarin">
                            <el-input v-model="MenUser.memKarin" type="text"></el-input>
                        </el-form-item>
                         <el-form-item label="文化程度" prop="memDegree">
                            <el-input v-model="MenUser.memDegree" type="text"></el-input>
                        </el-form-item>
                         <el-form-item label="个性签名" prop="memDesc">
                            <el-input v-model="MenUser.memDesc" type="text"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('MenUser')">提交</el-button>
                            <el-button @click="resetForm('MenUser')">重置</el-button>
                        </el-form-item>
                    </el-form>
                 </el-dialog>
             </div>
             <!-- 个性标签展示 -->
             <div style="margin-left: 50px;margin-top:70px;cursor: pointer">
                 <svg class="icon myIcon" aria-hidden="true" @click="dialogVisibleBiao = true">
                     <use xlink:href="#icon-bianji1"></use>
                 </svg>
                <span style="font-size:20px;color:LightGrey;cursor: pointer" @click="dialogVisibleBiao = true" v-if="params">自我评价</span>
                <span style="font-size:20px;color:#000;cursor: pointer" @click="dialogVisibleBiao = true" v-if="show">{{MenUser.memDesc}}</span>
                <svg class="icon myIcoms jiantou" aria-hidden="true" @click="dialogVisibleBiao = true">
                     <use xlink:href="#icon-jiantouyou"></use>
                </svg>
                <!-- 个性标签的对话框 -->
                <el-dialog title="个性标签" :visible.sync="dialogVisibleBiao" width="60%">
                    <button class="bottom_biaoqian" @click="MeberPublish">发布</button>
                    <div>
                        <textarea rows="20" cols="122" style="text-align:center;outline:none;border:none" v-model="MenUser.memDesc"></textarea>
                    </div>
                </el-dialog>
             </div>
              <!-- 会员动态信息表 -->
             <div style="margin-left: 50px;margin-top:70px;cursor: pointer">
                 <svg class="icon myIcon" aria-hidden="true" @click="clickTrends">
                     <use xlink:href="#icon-bianji1"></use>
                 </svg>
                 <span style="font-size:20px;cursor: pointer" @click="clickTrends">动态信息表</span>
                 <svg class="icon myIcoms jiantou" aria-hidden="true"  @click="clickTrends">
                     <use xlink:href="#icon-jiantouyou"></use>
                </svg>
                 <!-- 会员动态信息对话框 -->
                  <el-dialog title="会员动态信息" :visible.sync="dialogVisibletrends" width="60%">
                      <el-form :model="MemTrends" ref="MemTrends" label-width="100px" class="demo-ruleForm">
                          <el-form-item label="身高" prop="memTreHeight">
                            <el-input type="text" v-model="MemTrends.memTreHeight"   placeholder="请输入身高"></el-input>
                          </el-form-item>
                          <el-form-item label="体重" prop="memTreWeight">
                            <el-input type="text" v-model="MemTrends.memTreWeight" autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="舒张压" prop="memTreDiastole">
                            <el-input type="text" v-model="MemTrends.memTreDiastole" autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="收缩压" prop="memTreShrink">
                            <el-input type="text" v-model="MemTrends.memTreShrink" autocomplete="off"></el-input>
                          </el-form-item>
                            <el-form-item label="体温" prop="memTreTemperature">
                              <el-input type="text" v-model="MemTrends.memTreTemperature" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="呼吸" prop="memTreBreathe">
                              <el-input type="text" v-model="MemTrends.memTreBreathe" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="腰围" prop="memTreWaistline">
                              <el-input type="text" v-model="MemTrends.memTreWaistline" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="臀围" prop="memTreHip">
                              <el-input type="text" v-model="MemTrends.memTreHip" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="BMI" prop="memTreBmi">
                              <el-input type="text" v-model="MemTrends.memTreBmi" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="血氧饱和度" prop="memTreOxygen">
                              <el-input type="text" v-model="MemTrends.memTreOxygen" autocomplete="off"></el-input>
                            </el-form-item>
                          <el-form-item>
                            <el-button type="primary" @click="submitFormcase('MemTrends')" style="margin-left:600px">提交</el-button>
                            <el-button @click="resetForm('MemTrends')">重置</el-button>
                          </el-form-item>
                      </el-form>
                  </el-dialog>
              </div>
               <!-- 会员病例表 -->
             <div style="margin-left: 50px;margin-top:70px;cursor: pointer">
                  <svg class="icon myIcon" aria-hidden="true" @click="clickcase">
                      <use xlink:href="#icon-bianji1"></use>
                  </svg>
                  <span style="font-size:20px;cursor: pointer" @click="clickcase">动态病例表</span>
                  <svg class="icon myIcoms jiantou" aria-hidden="true"  @click="clickcase">
                      <use xlink:href="#icon-jiantouyou"></use>
                  </svg>
                  <!-- 会员病例对话框 -->
                  <el-dialog title="会员病例" :visible.sync="dialogVisibleCase" width="60%">
                    <span slot="footer" class="dialog-footer">
                       <el-form :model="MemCase" ref="MemCase" label-width="100px" class="demo-ruleForm">
                         <el-form-item label="家族史" prop="memCaseHisClan">
                            <el-input type="text" v-model="MemCase.memCaseHisClan" autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="手术史" prop="memCaseHisOperation">
                            <el-input type="text" v-model="MemCase.memCaseHisOperation" autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="过敏史" prop="memCaseHisAllergy">
                            <el-input type="text" v-model="MemCase.memCaseHisAllergy" autocomplete="off"></el-input>
                          </el-form-item>
                          <el-form-item label="病史" prop="memCaseHisMedical">
                            <el-input type="text" v-model="MemCase.memCaseHisMedical" autocomplete="off"></el-input>
                          </el-form-item>
                           <el-form-item label="慢性病" prop="memCaseHisChronic">
                            <el-input type="text" v-model="MemCase.memCaseHisChronic" autocomplete="off"></el-input>
                          </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="submitFormcasehistroy('MemCase')" style="margin-left:600px">提交</el-button>
                          <el-button @click="resetForm('MemCase')">重置</el-button>
                        </el-form-item>
                       </el-form>
                    </span>
                  </el-dialog>
              </div>
             <!-- 精选图片的上传 -->
             <div style="margin-left: 50px;margin-top:50px;">
                <svg class="icon myIcom" aria-hidden="true" style="width:30px;height:100px;position: absolute;left:42px;top:510px" @click="dialogVisibletaocan = true">
                     <use xlink:href="#icon-shu"></use>
                </svg>
                 <span style="font-size:30px;margin-left:20px" @click="clickchatao">订购的套餐</span>
                 <svg class="icon myIcoms jiantou" aria-hidden="true" @click="clickchatao">
                      <use xlink:href="#icon-jiantouyou"></use>
                  </svg>
                  <!-- 订购套餐的信息 -->
                  <el-dialog title="订购的套餐" :visible.sync="dialogVisibletaocan" width="90%">
                      <template>
                        <el-table :data="tableData" style="width: 100%">
                          <el-table-column prop="besName" label="订购人姓名" width="150"></el-table-column>
                          <el-table-column prop="besPhone" label="联系电话" width="210"></el-table-column>
                          <el-table-column prop="besBirthday" label="套餐名称" width="300"></el-table-column>
                          <el-table-column prop="besCreateTime" label="套餐价格" width="200"></el-table-column>
                          <el-table-column prop="besTime" label="预约日期" width="200"></el-table-column>
                          <!-- <el-table-column prop="besState" label="预约状态" width="200"></el-table-column> -->
                         <el-table-column
                          fixed="right"
                          label="操作"
                          prop="besState"
                         >
                          <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small" disabled v-if="scope.row.besState === 1? true:false">预约成功</el-button>
                            <el-button @click="handleClick(scope.row)" type="text" size="small" disabled v-if="scope.row.besState === 3? true:false">取消预约</el-button>
                            <el-button type="text" size="small" v-if="scope.row.besState=== 3 || scope.row.besComplete === 1 ? false:true" @click="updatequxiao(scope.row.besName,scope.row.besTime)">取消预约</el-button>
                            <el-button type="text" size="small" disabled v-if="scope.row.besComplete === 1">已完成体检</el-button>
                          </template>
                        </el-table-column>
                        </el-table>
                      </template>
                  </el-dialog>
             </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'Personal',
  data () {
    return {
      userid: '',
      imageUrl: 'static/img/20211027102825.jpg',
      MenUser: {
        memPhone: this.$store.state.user.memPhone
      },
      tableData: [],
      tablelist: [],
      MemTrends: {},
      MemCase: {},
      dialogVisible: false,
      dialogVisibleBiao: false,
      dialogVisibletou: false,
      dialogVisibletrends: false,
      dialogVisibletaocan: false,
      params: true,
      show: false,
      imgtou: '',
      dialogVisibleCase: false,
      rules: {
        memEmail: [
          { required: true, message: '邮箱不能为空' },
          {pattern: /^[A-Za-z1-9]+([-_.][A-Za-z1-9]+)*@([A-Za-z1-9]+[-.])+[A-Za-z]{2,5}$/, message: '请输入正确的邮箱格式'}
        ]
      }
    }
  },
  methods: {
    //   文件上传
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      return isJPG
    },

    // 查询会员的个人信息
    initLoginUser () {
      this.$axios.post(`/api/logincon/MeMberUser/${this.userid}`).then(result => {
        this.MenUser = result.data
        sessionStorage.setItem('user', JSON.stringify(result.data))
        console.log(result.data)
        if (result.data.memDesc !== '') {
          this.params = false
          this.show = true
        } else {
          this.params = true
          this.show = false
        }
        this.$axios.post(`/api/logincon/selecttran/${this.userid}`).then(results => {
          this.MemTrends = results.data
          this.$axios.post(`/api/logincon/selectcasehistory/${this.userid}`).then(resultcase => {
            this.MemCase = resultcase.data
          })
        })
      })
    },

    // 确定编辑个人信息
    submitForm (formName) {
      this.$axios.post(`/api/logincon/UpdateMemberUser`, this.MenUser).then(result => {
        sessionStorage.setItem('user', JSON.stringify(result.data))
        this.dialogVisible = false
      })
    },

    // 清空个人信息文本框的值
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },

    // 编辑  个性标签的的点击事件
    MeberPublish () {
      this.$axios.post(`/api/logincon/Publish`, this.MenUser).then(result => {
        this.dialogVisibleBiao = false
        this.initLoginUser()
      })
    },

    // 获取路径 头像上传
    changeFile (e) {
      console.log(document.getElementById('memid').value)
      if (document.getElementById('memid').value !== '') {
        var files = document.getElementById('memid').files
        var params = new FormData()
        params.append('imgtou', files[0])
        this.$axios({
          url: `/api/logincon/MenmberImg/${this.userid}`,
          method: 'post',
          data: params,
          headers: { 'Content-Type': 'multipart/form-data' }
        }).then(result => {
          if (result.data) {
            this.initLoginUser()
            this.$message({
              message: '修改头像成功！',
              type: 'success'
            })
          } else {
            this.$message.error('修改失败，出现未知错误，请稍后再试')
          }
        })
      } else {
        this.$message('请选择图片')
      }
    },

    // 更换头像的对话框弹出
    MenImg () {
      this.dialogVisibletou = false
    },

    clickTou () {
      document.getElementById('memid').click()
    },

    // 查询会员动态
    clickTrends () {
      this.dialogVisibletrends = true
      this.initLoginUser()
    },

    // 填写会员动态信息
    submitFormcase () {
      this.$axios.post(`/api/logincon/updatecasetran/${this.userid}`, this.MemTrends).then(result => {
        this.dialogVisibleCase = false
      })
    },

    // 查询会员病例信息
    clickcase () {
      this.dialogVisibleCase = true
      this.initLoginUser()
    },

    // 填写会员病例信息
    submitFormcasehistroy () {
      this.$axios.post(`/api/logincon/updatecasehistroy/${this.userid}`, this.MemCase).then(result => {
        this.dialogVisibletrends = false
      })
    },
    // input输入问题
    change (val) {
      this.$forceUpdate()
    },
    // 弹出订购套餐的对话框
    clickchatao () {
      this.dialogVisibletaocan = true
      this.tableData = []
      this.$axios.post(`/api/ProBeak/selecttaocan/${this.userid}`).then(result => {
        result.data.forEach((item, index) => {
          this.$axios.post(`/api/BespeakSetMeal/selectxiangqing/${this.userid}`).then(results => {
            results.data.forEach((items, index) => {
              if (item.besSmId === items.besSmId) {
                item.besBirthday = items.besSmName
                item.besCreateTime = items.besSmPrice + '元'
              }
              if (item.besSmId === items.besSmId) {
                this.tableData.push(item)
              }
            })
          })
        })
      })
    },
    handleClick (row) {
      console.log(row)
    },
    updatequxiao (besName, besTime) {
      if (confirm('确定要取消预约吗？')) {
        this.$axios.post(`/api/ProBeak/updatestate/${besName}/${besTime}`).then(result => {
          this.clickchatao()
        })
      }
    },
    // 截取身份证日期 拼接出生日期
    jiequ () {
      let y = this.MenUser.memIdentity.substring(6, 10)
      let m = this.MenUser.memIdentity.substring(10, 12)
      let d = this.MenUser.memIdentity.substring(12, 14)
      this.MenUser.memBirthday = y + '-' + m + '-' + d
    },
    goBack () {
      this.$router.push('/home')
    }
  },
  created () {
    let a = sessionStorage.getItem('user')
    let user = JSON.parse(a)
    this.userid = user.memId
    this.initLoginUser()
  }
}

</script>

<style>
.MeMber-last{width: 1560px; height: 600px;background-color: white;position: absolute;top:400px;}
/* 去掉滚动条 */
::-webkit-scrollbar {width: 0 !important;}
::-webkit-scrollbar {width: 0 !important;height: 0;}
.icon{width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;margin-right:15px;cursor: pointer}
.myIcoms{font-size: 20px;}
.myIcoms:hover{color: burlywood;}
.myIcon{font-size: 30px;color: #000;cursor: pointer}
.biaoqian{border-radius: 5px;width: 500px;height: 35px;border-right: none;}
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
.avatar-uploader-icon {font-size: 28px;color: #8c939d; width: 1250px;height: 650px;line-height: 650px;text-align: center;}
.avatar {width: 1400px;height: 750px;display: block;}
.avatar-uploader .el-upload__input{display: none;}
.jiantou{position: absolute;right: 97px;}
.biaoqian{position: absolute;right: 97px;}
.bottom_biaoqian{border:none;outline:none;background-color: white;font-size:25px; position: absolute;right:20px;top:10px}
.bottom_biaoqian:hover{color: wheat;}
</style>
